# 一前言
上节主要讲了 React 对组件渲染的控制方法以及原理,本章节将继续围绕 React 渲染话题,谈一谈整个 React 渲染过程中细节问题怎么解决。
通过本章节,你将学会 Suspense 用法和原理,React.lazy 用法和配合 Suspense 实现代码分割,渲染错误边界、渲染异常的处理手段, 以及 diff 流程以及 key 的合理使用。
# 二懒加载和异步渲染
# 异步渲染
Suspense 是 React 提出的一种同步的代码来实现异步操作的方案。Suspense 让组件‘等待’异步操作,异步请求结束后在进行组件的渲染,也就是所谓的异步渲染,但是这个功能目前还在实验阶段,相信不久这种异步渲染的方式就能和大家见面了。
Suspense 用法
Suspense 是组件,有一个 fallback 属性,用来代替当 Suspense 处于 loading 状态下渲染的内容,Suspense 的 children 就是异步组件。多个异步组件可以用 Suspense 嵌套使用。
我写了一个异步渲染的例子如下。
// 子组件
function UserInfo() {
// 获取用户数据信息,然后再渲染组件。
const user = getUserInfo();
return <h1>{user.name}</h1>;
}
// 父组件
export default function Index(){
return <Suspense fallback={<h1>Loading...</h1>}>
<UserInfo/>
</Suspense>
}
- Suspense 包裹异步渲染组件 UserInfo ,当 UserInfo 处于数据加载状态下,展示 Suspense 中 fallback 的内容。
如上所示,异步渲染的 UserInfo 组件可以直接通过 getUserInfo 请求数据,直接用数据 user 进行渲染,很显然现在是做不到的。现在的异步请求方式比较繁琐,主要是是通过类组件 componentDidMount 或者函数组件 useEffect 进行数据交互,获得数据后通过调用 setState 或 useState 改变 state 触发视图的更新。
传统模式:挂载组件-> 请求数据 -> 再渲染组件。 异步模式:请求数据-> 渲染组件。
那么异步渲染相比传统数据交互相比好处就是:
- 不再需要 componentDidMount 或 useEffect 配合做数据交互,也不会因为数据交互后,改变 state 而产生的二次更新作用。
- 代码逻辑更简单,清晰。
# 动态加载(懒加载)
现在的 Suspense 配合 React.lazy 可以实现动态加载功能。
React.lazy
const LazyComponent = React.lazy(()=>import('./text'))
React.lazy 接受一个函数,这个函数需要动态调用 import() 。它必须返回一个 Promise ,该 Promise 需要 resolve 一个 default export 的 React 组件。
先来看一下基本使用:
const LazyComponent = React.lazy(() => import('./test.js'))
export default 